<template>
	<gracePage headerBG="#f2f2f2" :bounding="false">
		<view slot="gHeader" class="main-bodybg-color-f2">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">我的收藏</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-body main-bodybg-color pt-2">
			<view v-if="collectionLists.length == 0">
				<graceEmptyNew>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">暂无收藏</text>
				</graceEmptyNew>
			</view>
			<view  v-else> 
				<view class="grace-shoppingcard-goods px-2 mb-2" v-for="(goods, indexItem) in collectionLists" :key="indexItem" @click="shopInfoFn(goods.goods_id)">
					<image :src="goods.goods_img" class="grace-shoppingcard-goods-image" style="width: 154rpx;height: 154rpx;" mode="widthFix"></image>
					<view class="grace-shoppingcard-goods-body">
						<view class="grace-shoppingcard-goods-title pt-1">{{ goods.goods_name }}</view>
						<view class="my-shoppingcard-goods-title grace-ellipsis grace-black9 grace-text" v-if="goods.goods_attr">{{ goods.goods_attr }}</view>
						<view class="grace-space-between">
							<view class="grace-wrap grace-flex-vbottom">
								<text class="grace-shoppingcard-goods-price" style="font-size: 24rpx;padding-bottom: 6rpx;">￥</text>
								<text class="grace-shoppingcard-goods-price">{{ goods.shop_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceEmptyNew from '@/graceUI/components/graceEmptyNew.vue';
export default {
	data() {
		return {
			collectionLists: [],
			oneGoStatus:true
		};
	},
	computed: {},
	onLoad(option) {},
	created() {
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_collect' }, { token: true });
			console.log('data', data);
			if (data.error) return;
			this.collectionLists = data;
		},
		// 进入商品详情
		shopInfoFn: function(id) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopInfo/shopInfo?id=' + id,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		// 进入套装商品详情
		shopInfoFn3: function(id) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopInfo3/shopInfo3?id=' + id,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
	},
	components: { gracePage, graceEmptyNew }
};
</script>
<style>
page {
	background: #f2f2f2;
}
.grace-shoppingcard-goods {
	display: flex;
	flex-wrap: nowrap;
}

.grace-shoppingcard-goods-image {
	padding-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 30rpx;
	width: 500rpx;
	mix-height: 60rpx;
	max-height: 90rpx;
	overflow: hidden;
}
.my-shoppingcard-goods-title {
	line-height: 30rpx;
	width: 500rpx;
	height: 30rpx;
	border: 1px solid red;
}
.grace-shoppingcard-goods-price {
	color: #f00;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

</style>
